<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>定时任务修改</span>
      </div>
      <div>
        <div style="height: 350px;overflow-y: auto;overflow-x: hidden;">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm"  size="small" label-width="140px" class="demo-ruleForm">
          <el-row :gutter="5">
            <el-col :span="12">
              <el-form-item label="任务名称" prop="name">
                <el-input disabled v-model="ruleForm.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="5">
            <el-col :span="12">
              <el-form-item label="任务组名" prop="group">
                <el-input disabled v-model="ruleForm.group"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="5">
            <el-col :span="12">
              <el-form-item label="执行时间表达式" prop="cronExpression">
                <el-input v-model="ruleForm.cronExpression"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="5">
            <el-col :span="12">
              <el-form-item label="执行任务具体类名" prop="targetClassName">
                <el-input v-model="ruleForm.targetClassName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <span style="display:inline-block;margin-left:8px;line-height: 33px;color: #f56c6c;font-size: 14px;">执行任务具体类名（类需要实现 org.quartz.Job 接口）</span>
            </el-col>
          </el-row>
        </el-form>
          <div>
            <span style="color: #f56c6c;font-size: 16px;">执行时间表达式规则：</span>
            <div class="rulHint">
              <p>一、cron表达式用于配置cronTrigger的实例。cron表达式实际上是由七个子表达式组成。这些表达式之间用空格分隔</p>
              <ul>
                <li>1. Seconds （秒）</li>
                <li>2. Minutes（分）</li>
                <li>3. Hours（小时）</li>
                <li>4. Day-of-Month  （天）</li>
                <li>5. Month（月）</li>
                <li>6. Day-of-Week （周）</li>
                <li>7. Year（年）</li>
              </ul>
              <p>二、Cron表达式的格式：秒 分 时 日 月 周 年(可选)</p>
              <table class="rulHintTable">
                <thead>
                <tr>
                  <td>字段名</td>
                  <td>允许的值</td>
                  <td>允许的特殊字符</td>
                </tr>
                </thead>
                <tbody>
                <tr>
                  <td>秒</td>
                  <td>0-59</td>
                  <td>, - * /</td>
                </tr>
                <tr>
                  <td>分</td>
                  <td>0-59</td>
                  <td>, - * /</td>
                </tr>
                <tr>
                  <td>小时</td>
                  <td>0-23</td>
                  <td>, - * /</td>
                </tr>
                <tr>
                  <td>日</td>
                  <td>1-31</td>
                  <td>, - * ? / L W C</td>
                </tr>
                <tr>
                  <td>月</td>
                  <td>1-12 or JAN-DEC</td>
                  <td>, - * /</td>
                </tr>
                <tr>
                  <td>周几</td>
                  <td>1-7 or SUN-SAT</td>
                  <td>, - * ? / L C #</td>
                </tr>
                <tr>
                  <td>年(可选字段)</td>
                  <td>empty</td>
                  <td>1970-2099 , - * /</td>
                </tr>
                </tbody>
              </table>
              <p>三、字符含义：</p>
              <ul class="tsUl">
                <li><span>*</span> ：代表所有可能的值。因此，“*”在Month中表示每个月，在Day-of-Month中表示每天，在Hours表示每小时</li>
                <li><span>-</span> ：表示指定范围。</li>
                <li><span>,</span> ：表示列出枚举值。例如：在Minutes子表达式中，“5,20”表示在5分钟和20分钟触发。</li>
                <li><span>/</span> ：被用于指定增量。例如：在Minutes子表达式中，“0/15”表示从0分钟开始，每15分钟执行一次。"3/20"表示从第三分钟开始，每20分钟执行一次。和"3,23,43"（表示第3，23，43分钟触发）的含义一样。</li>
                <li><span>?</span> ：用在Day-of-Month和Day-of-Week中，指“没有具体的值”。当两个子表达式其中一个被指定了值以后，为了避免冲突，需要将另外一个的值设为“?”。例如：想在每月20日触发调度，不管20号是星期几，只能用如下写法：0 0 0 20 * ?，其中最后以为只能用“?”，而不能用“*”。</li>
                <li><span>L</span> ：用在day-of-month和day-of-week字串中。它是单词“last”的缩写。它在两个子表达式中的含义是不同的。
                  在day-of-month中，“L”表示一个月的最后一天，一月31号，3月30号。
                  在day-of-week中，“L”表示一个星期的最后一天，也就是“7”或者“SAT”
                  如果“L”前有具体内容，它就有其他的含义了。例如：“6L”表示这个月的倒数第六天。“FRIL”表示这个月的最后一个星期五。
                  注意：在使用“L”参数时，不要指定列表或者范围，这样会出现问题。</li>
                <li><span>W</span> ：“Weekday”的缩写。只能用在day-of-month字段。用来描叙最接近指定天的工作日（周一到周五）。例如：在day-of-month字段用“15W”指“最接近这个月第15天的工作日”，即如果这个月第15天是周六，那么触发器将会在这个月第14天即周五触发；如果这个月第15天是周日，那么触发器将会在这个月第 16天即周一触发；如果这个月第15天是周二，那么就在触发器这天触发。注意一点：这个用法只会在当前月计算值，不会越过当前月。“W”字符仅能在 day-of-month指明一天，不能是一个范围或列表。也可以用“LW”来指定这个月的最后一个工作日，即最后一个星期五。</li>
                <li><span>#</span> ：只能用在day-of-week字段。用来指定这个月的第几个周几。例：在day-of-week字段用"6#3" or "FRI#3"指这个月第3个周五（6指周五，3指第3个）。如果指定的日期不存在，触发器就不会触发。</li>
              </ul>
            </div>
          </div>
        </div>
        <div style="margin-top: 15px;">
          <el-row :gutter="5">
            <el-col style="text-align: right;">
              <el-button class="filter-item" type="primary" @click="saveData">保存</el-button>
              <el-button class="filter-item" type="primary" @click="closeSelf">关 闭</el-button>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'changePassword',
  data() {
    return {
      options: [],
      formData: {},
      postList: {
        name: '',
        group: ''
      },
      ruleForm: {
        name: '',
        group: '',
        cronExpression: '',
        targetClassName: ''
      },
      rules: {
        name: [
          { required: true, message: '请填写任务名称', trigger: 'blur' }
        ],
        group: [
          { required: true, message: '请填写任务组名', trigger: 'blur' }
        ],
        cronExpression: [
          { required: true, message: '请填写执行时间表达式', trigger: 'blur' }
        ],
        targetClassName: [
          { required: true, message: '请填写执行任务具体类名', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.postList.name = this.$route.query.name
      this.postList.group = this.$route.query.group
      this.$store
        .dispatch('SingleStrip', this.postList)
        .then(res => {
          this.ruleForm = res.data
        })
        .catch(() => {

        })
    },
    fcTimeTime() {

    },
    lmTimeTime() {

    },
    closeSelf() {
      this.$router.push({ name: 'timingTask' })
    },
    saveData() {
      this.formData = this.ruleForm
      this.$store
        .dispatch('ModificationTask', this.formData)
        .then(res => {
          if (res.statusCode == 200) {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.$router.push({ name: 'timingTask' })
          } else {
            this.$message({
              message: '任务修改异常',
              type: 'error'
            })
          }
        })
        .catch(() => {

        })
    },
    birthdayTime(val) {
      // this.ruleForm.birthday = val + '000000'
    },
    workDateTime(val) {
      // this.ruleForm.workDate = val + '000000'
    },
    employedDateTime(val) {
      // this.ruleForm.employedDate = val + '000000'
    }
  }
}
</script>
<style scoped>
  .tsUl li{
    margin-top: 5px;
  }
  .rulHint p{
    font-size: 14px;
    color: #333;
    line-height: 36px;
  }
  .rulHint ul{
    margin-left: 26px;
  }
  .rulHint ul li{
    font-size: 14px;
    color: #333;
    line-height: 26px;
  }
  .rulHint ul li span{
    color: #f56c6c;
    font-size: 16px;
    font-weight: 700;
  }
  .rulHintTable{
    margin-left: 26px;
  }
  .rulHintTable tr{line-height: 24px;}
  .rulHintTable tr td{
    width: 140px;
    font-size: 14px;
    color: #333;
  }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
